<!-- 登录界面 -->
<template>
  <div class="login-container">
    <div class="login-header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <div class="header-title">登录/注册</div>
    </div>
    
    <div class="login-content">
      <div class="avatar-placeholder">
        <img src="../assets/shunf.png" alt="默认头像">
      </div>
      
      <div class="slogan">一路相伴  不负所托</div>
      
      <div class="login-options">
        <div class="login-button phone" @click="handlePhoneLogin">
          <img src="../assets/phone-icon.png" alt="手机图标">
          <span>手机号码登录</span>
        </div>
        
        <div class="other-options">
          <div class="option-item" @click="handleSocialLogin('wechat')">
            <img src="../assets/wechat-icon.png" alt="微信图标">
            <span>微信</span>
          </div>
          <div class="option-item" @click="handleSocialLogin('qq')">
            <img src="../assets/qq-icon.png" alt="QQ图标">
            <span>QQ</span>
          </div>
        </div>
      </div>
      
      <div class="terms">
        <label class="agreement-checkbox">
          <input type="checkbox" v-model="agreementChecked" @click="showAgreement">
          <span class="checkmark"></span>
          阅读同意<router-link to="/user-agreement" class="link">《顺丰速运服务协议》</router-link>和<router-link to="/privacy-policy" class="link">《顺丰速运隐私政策》</router-link>
        </label>
        <p>未注册用户登录默认为顺丰注册会员</p>
      </div>
    
      <div class="customer-service">
        遇到问题？拨打客服电话<span class="phone-number">95338</span>
      </div>
    </div>

    <!-- 用户协议弹窗 -->
    <div class="agreement-modal" v-if="showAgreementModal" :class="{ 'show': showAgreementModal }">
      <div class="agreement-content">
        <h2 class="agreement-title">用户协议及隐私政策</h2>
        <div class="agreement-text">
          在您注册成为顺丰速运会员的过程中，您需要通过点击同意的形式在线签署
        <span style="font-weight: bolder;">《顺丰速运用户协议》、《顺丰速运隐私政策》</span>
          ，请您务必仔细阅读、充分理解条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        </div>
        <div class="agrewment-confirm2">
            请你注意：如果你不同意上述服务条款、隐私政策或其中任何约定，请您停止注册。如您阅读并点击同意即表示您已充分阅读、理解并接受其全部内容，并表明您也同意顺丰速运可以依据以上隐私政策来处理您的个人信息。如您对以上服务条款、隐私政策有任何疑问，您可联系顺丰速运客服。
        </div>
        <div class="agreement-confirm">
          点击同意即表示已阅读并同意<router-link to="/user-agreement" style="color: #3372b2;">《顺丰速运用户协议》</router-link>与<router-link to="/privacy-policy" style="color:#3372b2">《顺丰速运隐私政策》</router-link>
        </div>
        
        <div class="agreement-buttons">
          <button class="disagree-btn" @click="handleDisagree">不同意</button>
          <button class="agree-btn" @click="handleAgree">同意</button>
        </div>
      </div>
    </div>

    <!-- 提示框 -->
    <div class="tip-modal" v-if="showTipModal" @click="closeTipModal">
      <div class="tip-content" @click.stop>
        请使用手机号登录
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      agreementChecked: false,
      showAgreementModal: false,
      showTipModal: false
    }
  },
  methods: {
    goBack() {
      this.$router.push('/my-page')
    },
    showAgreement(event) {
      event.preventDefault(); // 阻止复选框状态改变
      this.showAgreementModal = true;
    },
    handleAgree() {
      this.showAgreementModal = false;
      this.agreementChecked = true;
    },
    handleDisagree() {
      this.showAgreementModal = false;
      this.agreementChecked = false;
    },
    handleSocialLogin() {
      this.showTipModal = true;
    },
    closeTipModal() {
      this.showTipModal = false;
    },
    handlePhoneLogin() {
      if (!this.agreementChecked) {
        this.showAgreementModal = true;
        return;
      }
      this.$router.push('/phone-verify');
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
}

.login-header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}

.back-button {
  position: absolute;
  left: 15px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.login-content {
  padding: 40px 20px;
}

.avatar-placeholder {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slogan {
  text-align: center;
  font-family: "SimHei", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #333;
  margin-bottom: 40px;
  letter-spacing: 10px;
  /* 加宽字间距 */
}

.login-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background-color: #ff4d4f;
  border-radius: 22px;
  color: white;
  font-size: 16px;
  gap: 8px;
}

.login-button img {
  width: 20px;
  height: 20px;
}

.other-options {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.option-item img {
  width: 30px;
  height: 30px;
}

.option-item span {
  font-size: 12px;
  color: #666;
}

.terms {
  margin-top: 40px;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.link {
  color: #3372b2;
}

/* 复选框样式 */
.agreement-checkbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.agreement-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.agreement-checkbox input:checked ~ .checkmark {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.agreement-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* 协议弹窗样式 */
.agreement-modal {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
}

.agreement-modal.show {
  bottom: 0;
}

.agreement-content {
  background: white;
  padding: 24px;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.agreement-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.agreement-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
  text-align: justify;
}

.agreement-confirm {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  text-align: center;
}
.agrewment-confirm2{
    margin-bottom: 20px;
    color: #818080;
    font-size: 14px;
}

.agreement-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.disagree-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.agree-btn {
  flex: 2;
  padding: 12px;
  border: none;
  border-radius: 4px;
  background-color: #ff4d4f;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.agree-btn:hover {
  background-color: #ff3333;
}

.disagree-btn:hover {
  background-color: #e5e5e5;
}

/* 提示框样式 */
.tip-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.tip-content {
  background: white;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 客服电话样式 */
.customer-service {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: #666;
  z-index: 999;
}

.phone-number {
  color: #ff4d4f;
  font-weight: bold;
}
</style>